遊記ep.27 Remove / Delete Marker in Google村

第 11 屆 iThome 鐵人賽

DAY 27

自我挑戰組

Ruby菜鳥村村民遊記系列第 27 篇

11th鐵人賽 google api google map

Bunny

2019-10-12 20:29:17

1747 瀏覽

分享至

昨天我們讓 marker 增添了動感不少，
今天想再來多增加一些跟地圖的互動，
先來看一下程式碼的部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Combo</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 80%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteMarkers();" type=button value="Delete Markers">
    </div>
    <div id="map"></div>
    <p>Click on the map to add markers.</p>
    <script>
      var map;
      var marker;
      var markers = [];
      var taiwan = {lat: 23.5, lng: 121};
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: taiwan
        });
        
        map.addListener('click', function(event){
          addMarker(event.latLng);
        });
        addMarker(taiwan);
        marker.addListener('click', toggleBounce);
        
      }

      function toggleBounce() {
        if (marker.getAnimation() !== null) {
          marker.setAnimation(null);
        } else {
          marker.setAnimation(google.maps.Animation.BOUNCE);
        }
      }

      function addMarker(location) {
        marker = new google.maps.Marker({
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: location,
        map: map
        });
        markers.push(marker);
      }

      function setMapOnAll(map){
        for (var i = 0; i< markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      function clearMarkers(){
        setMapOnAll(null);
      }

      function showMarkers(){
        setMapOnAll(map);
      }

      function deleteMarkers() {
        setMapOnAll();
        markers = [];
      }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=PutYourKeyHere&callback=initMap">
    </script>
  </body>
</html>

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: taiwan
    });

    map.addListener('click', function(event){
      addMarker(event.latLng);
    });
    addMarker(taiwan);
    marker.addListener('click', toggleBounce);

}

老樣子一樣先產生地圖出來，
我們想要將昨天加入的元素放進來，
對地圖加入一個 click 要素來觸發事件，
讓我們可以對地圖點擊任何地方都產生出一個 marker。
再來對地圖的中心點也放了一個 marker，
同時也針對 marker 給予一個 click 來觸發事件。

function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

有看Day26的話應該對這段函式不會太陌生，
這段函式就是判斷 marker 本身是否有動畫屬性，沒有的話就賦予他一個動畫效果！

function addMarker(location) {
    marker = new google.maps.Marker({
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: location,
    map: map
    });
    markers.push(marker);
}

再來看看 addMarker 為我們做了什麼呢
產生出一個 marker，並給予可拖曳的屬性，以及產生 marker 的當下來個掉落的動畫，
位置則是去抓取點擊地圖當下的經緯度，
這樣就可以做出點擊地圖直接幫我們在該位置建立一個 marker 的效果了！
最後把這些 marker push 進去陣列裡面。

function setMapOnAll(map){
    for (var i = 0; i< markers.length; i++) {
      markers[i].setMap(map);
    }
}

這段函式所做的處理是，去幫我們管理目前生成的所有 marker，
先預設給這些 marker 顯示於地圖上 setMap(map)。

function clearMarkers(){
    setMapOnAll(null);
}

function showMarkers(){
    setMapOnAll(map);
}

function deleteMarkers() {
    setMapOnAll();
    markers = [];
}

最後來處理位於地圖畫面上方三個按鈕做的事，
當setMap()參數代入的是引數是 null，可以做到隱藏的效果，
表示不會出現在地圖上，但這些資料不會消失；
跟 deleteMarkers 不同的是，他除了引數代入的是()，
還順便把 markers 陣列中清空了，所以後來如果想叫回先前的 marker 是沒有辦法的。
showMarker做的就是讓 markers 陣列中的所有 marker 出現。

不過其實今天的 demo 是有些 bug 存在的，
只有一開始預設出現在 taiwan 這個經緯度的 marker 才能觸發原地彈跳的動畫，
後面點擊地圖出現的 marker 都不能點擊自身來觸發彈跳動畫，
而必須得靠最一開始的 marker 來觸發，非常奇怪～
歡迎有大大能幫忙 debug 或給予一些建議～十分感謝！

今天，你把玩 Google Map 了嗎？：）

參考文件：
Google Map 官方文件